<template>
	<section>
		<!--start  面包屑-->
		<div class="location">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{path:'/goods'}">商品</el-breadcrumb-item>
				<el-breadcrumb-item :to="{path:'/goods/purOrderStorage'}">采购待入库</el-breadcrumb-item>
				<el-breadcrumb-item>入库审核</el-breadcrumb-item>
			</el-breadcrumb>
			<help-components>
			<span slot="headText">商品列表</span>
			<p slot="headDescText">商品列表用于查看、管理商品基础资料。</p>
			<div slot="helpContentWrap">
				<div>
					<h3>如何快速初始化商品信息？</h3>
					<p>
						①	设置好商品分类、计量单位、品牌等基础信息。（入口：右上方 【设置->辅助资料】）<br />
						②	设置好客户级别，如需按客户级别设置订货价需设置此项。（入口：右上方 【设置->辅助资料】）<br />
						③	导入商品数据及价格数据，常规标准商品可通过商品库导入，商品库中不存在的商品可通过按照模板自行录入商品信息（入口：【商品列表->导入】）<br />
						④	导入客户单独订价,如无需按单个客户设置商品的订货价可忽略此步骤。（入口：【商品列表->导入】）<br />
						⑤	导入商品图片（入口：【商品列表->导入】）<br />
						⑥	导入商品库存信息（商品库存->库存盘点）<br />
					</p>
				</div>
			</div>
		  </help-components>
		</div>
		<!--end  面包屑-->

		<div class="order" id="order">
			<div class="ruku-sousuo">
				<div class="ruku-left">
            <el-form :model="purData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="入仓库" prop="warehouseCode">
                  <el-select v-model="purData.warehouseName" disabled>
                    <el-option v-for="(item,index) in vue_warehouse_listAll" :label="item.warehouseName" :value="item.warehouseCode"></el-option>
                  </el-select>
              </el-form-item>
            </el-form>
				</div>
			</div>
			<div class="order-tab">
				<table class="order-tab1" border="0" cellspacing="0" cellpadding="0" width="100%">
					<col width="6%" />
					<col width="15%" />
					<col width="29%" />
					<col width="25%" />
					<col width="10%" />
					<col width="15%" />
					<tr class="tab-th">
						<td>序号</td>
						<td>商品编码</td>
						<td>商品名称</td>
						<td>规格</td>
						<td>单位</td>
						<td>采购数</td>
					</tr>
					<tr class="hoverTr" v-for="(item,index) in purData.purOrderData.purOrderGoodsDataList">
						<td>{{index+1}}</td>
						<td>{{item.goodsCode}}</td>
						<td>{{item.goodsName}}</td>
						<td>{{item.goodsSkuValue}}</td>
						<td>{{item.goodsNumUnit}}</td>
						<td>{{item.goodsOrderNum}}</td>
					</tr>
					<tr class="hoverTr">
						<td>合计</td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td>{{purData.purOrderData.orderNum}}</td>
					</tr>
				</table>
			</div>
			<div class="ruku-section">
				<div class="section-left">
					<el-form :model="purData" :rules="rules" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
	  					<el-form-item label="入库日期" prop="checkinDate">
                <el-date-picker
                  v-model="purData.checkinDate"
                  type="datetime"
                  placeholder="选择日期时间">
                </el-date-picker>
					    </el-form-item>
						<el-form-item label="经办人">
						    <el-input v-model="purData.transactOpName"></el-input>
						  </el-form-item>
            <el-form-item label="入库类型" prop="checkinType">
              <el-input v-model="purData.checkinType.value"  :disabled="true"></el-input>
            </el-form-item>
					</el-form>
				</div>
				<div class="section-right">
					<el-form :model="purData" label-width="100px" class="demo-ruleForm">
	  					<el-form-item label="备注">
						    <el-input type="textarea" v-model="purData.checkinRemark" placeholder="请输入备注信息，最多不超过100个字"></el-input>
						  </el-form-item>
            <el-form-item label="制单人">
						 <el-input type="text" :disabled="true" v-model="purData.createOpName"></el-input>
						</el-form-item>
					</el-form>
				</div>
			</div>

			<div class="order-deta">
        <el-button type="primary" :disabled="clickBtn"  @click="update()">保存</el-button>
        <el-button @click="$router.push({path:'/goods/purOrderStorage'})">取消</el-button>
			</div>
		</div>
	</section>
</template>

<script>
	import helpComponents from '../../../components/help/help'
	export default {
		components:{helpComponents},
		data() {
      var dateRule = (rule, value, callback) => {
        if(!value) {
          return callback(new Error('入库日期不能为空'));
        }else{
          callback();
        }
      };
			return {
        clickBtn:false,                 //请求数据后禁用按钮
        vue_warehouse_listAll:[],  //所有仓库
        orderCode:"",				//存储上个页面localStorage传的orderCode
        purData:{
          createOpName:"",    //存储制单人
          purOrderData:{},     //获取table列表
          warehouseCode:"",     //仓库code
          warehouseName:"",     //仓库名称
          checkinDate:"",   //入库日期
          checkinType:{
          	code:"00100000208",
          	value:"采购入库"
          },   //入库类型
          transactOpName:"",   //经办人
        },
        rules: {
          checkinDate:[{ required: true, validator:dateRule, trigger: 'blur' }],
        },
				vuerules:false,					//验证条件
			}
		},
		methods: {
      //保存按钮  start
			update(){
        this.$refs.ruleForm2.validate((valid) => {
          if (valid) {
            this.vuerules=true
          } else {
            return false;
          }
				});
        if(this.vuerules){
          this.clickBtn=!this.clickBtn;
          this.axios({
            method: 'PATCH',
            url: "/v3/pur/orders/"+this.orderCode+"/batchCheckin",
            data:{
              "warehouseCode":this.purData.warehouseCode,
              "warehouseName":this.purData.warehouseName,
              "checkinType":this.purData.checkinType.code,
              "checkinDate":this.purData.checkinDate,
              "checkinRemark":this.purData.checkinRemark,
              "transactOpName":this.purData.transactOpName,
              "createOpName":this.purData.createOpName,
              "stockCheckinGoodsStr":JSON.stringify(this.purData.purOrderData.purOrderGoodsDataList),
            }
          }).then((res) => {
            this.clickBtn=!this.clickBtn;
            this.$router.push({path:"/goods/purOrderStorage"});
            this.Public.openSuccess(this,"操作成功！")
          }).catch((err)=>{
            this.clickBtn=!this.clickBtn;
            this.Public.openError(this,err.response.data);
          });

        }
			},

      //初始化页面数据
      queryInfo(){
        this.axios({
          method: 'GET',
          url: "/v3/pur/orders/"+this.orderCode,
          data:{}
        }).then((res) => {
          this.purData.purOrderData = res.data;
        }).catch((err)=>{
          this.Public.openError(this,err.response.data);
        });
      },

      //获取制单人名称
      query_createOpName(){
        this.axios({
          method: 'GET',
          url: "/v3/member/operators"
        }).then((res) => {
          this.purData.createOpName = res.data.operatorName;	// 制单人名称
        }).catch((err)=>{
          this.Public.openError(this,err.response.data)
        });
      },

      //获取仓库
      query_warehouse(){
        this.axios({
          method:"POST",
          url:"/v3/goods/warehouses/queryDefault",
          data:{}
        }).then((res)=>{
//          this.vue_warehouse_listAll = res.data;
          /*放置默认仓库*/
          this.purData.warehouseCode = res.data.warehouseCode;
          this.purData.warehouseName = res.data.warehouseName;
        }).catch((err)=>{
          this.Public.openError(this,err.response.data);
        });
      },

		},
		created(){
      this.orderCode = localStorage.getItem("orderCode");
      this.query_warehouse();
      this.queryInfo();
      this.query_createOpName();
    },

		mounted() {
			//获取窗口高度
			var winHieg = document.documentElement.clientHeight;
			var cont = document.getElementById("order");
			cont.style.height = winHieg - 105 + "px";
		},

	}
</script>

<style scoped>
	@import "../../../assets/css/zijin.css";
	.location {
		padding: 3px 0 15px 0;
	}
	.order {
		background: #fff;
		padding: 5px 20px;
		overflow-y: auto;
		font-family: "微软雅黑";
		position: relative;
	}
	.order-tab{
		margin-top: 15px;
		border-left: 1px solid #e7e9f1;
	}
	.order-tab1 td{
		text-align: center;
		padding: 0px 0;
		border: 1px solid #e7e9f1;
		border-top: 0;
		border-left:0;
		position: relative;
	}
	.order-tab1 td img{
		width: 45px;
		margin: 0 auto;
	}
	.order-tab1 .tab-th td{
		background: #eff1f8;
		padding: 14px 0;
	}
	.order-tab1 .order-input1{
		height: 34px;
		width: 100px;
		border: 1px solid #cdd9e6;
		border-radius:4px ;
		text-align: center;
	}
	.dorder-td td{
		padding: 15px 0;
	}
	.dorder-tend td{
		padding: 12px 15px;
		text-align: right;
	}
	.dorder-tend p span{
		display: inline-block;
		width: 120px;
	}
	.dorder-tend p:last-child span{
		color: #f33333;
		font-size: 20px;
	}
	.dorder-tend p {
		margin-top: 0px;
	}
	.order-deta{
		margin: 20px;
		clear: both;
    cursor: pointer;
	}
	.order-deta span{
		margin-right: 10px;
	}
	.order-deta a{
		display: inline-block;
		width: 80px;
		height: 30px;
		text-align: center;
		line-height: 31px;
		border-radius: 20px;
		border: 1px solid #cdd9e6;
		margin-top: 30px;
	}
	.order-deta a:first-child{
		background: rgb(19, 193, 159);
		color: #fff;
		border: 0;
		height: 32px;
		line-height: 32px;
	}
	.order-add{
		display: none;
	}
	/*.hoverTr:hover .order-num {*/
		/*display: none;*/
	/*}*/

	.hoverTr:hover .order-add {
		display: inline-block;
	}
	.hoverTr td{
		height: 54px;
		padding: 0;
	}
	.ruku-sousuo{
		overflow: hidden;
		margin-top: 15px;

		margin-left: -10px;
	}
	.ruku-sousuo .el-select,.ruku-sousuo .el-date-editor.el-input{
		width: 353px;
	}
	.ruku-left{
		float: left;
		width: 450px;
	}
	.ruku-right{
		float: left;
	}
	.house{
		color: red;
		position: relative;
		top: 2px;
	}
	.ruku-section{
		overflow: hidden;
		margin-top: 20px;
	}
	.section-left{
		float: left;
		width: 450px;
		margin-left: -10px;
	}
	.section-left .el-select{
		width: 450px;
	}
	.section-left .el-date-editor.el-input{
		width: 353px;
	}
	.section-right{
		float: left;
		width: 450px;
	}
	.order-tab{
		margin-top: 0;
	}
	.border{
		border: 1px solid red;
	}
	.section-left .el-textarea{
		width: 450px;
	}
</style>

